<template>
  <a-modal
    v-model:visible="iframeVisible"
    :modal-class="fileExt === 'mp4' ? 'video-modal' : ''"
    :fullscreen="fullscreen"
  >
    <template #title>
      查看
    </template>
    <div v-show="fileExt === 'mp4'" class="">
      <video v-if="fileExt === 'mp4' && fileSrc" class="video-box" :autoplay="true" :controls="true">
        <source :src="fileSrc" type="video/mp4">
<!--        <object :data="fileSrc" width="100%" height="100%">
          <embed :src="fileSrc" width="100%" height="100%">
        </object>-->
      </video>
    </div>
    <iframe-manage v-show="fileExt !== 'mp4'" :src="fileSrc" :frameborder="iframeFrameborder" />
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Message } from '@arco-design/web-vue';

  import { openWindow, downloadFile, getFileType } from '@/utils';
  import IframeManage from '@/views/components/iframe.vue';

  const props = defineProps({
    // 文件后缀名
    fileExt: {
      type: String,
      default: '',
    },
  });

  const iframeVisible = ref(false);
  const iframeFrameborder = ref(0);
  const fullscreen = ref(true);
  const fileSrc = ref('');
  const fileExt = ref('');

  const viewFile = (src: string) => {
    if (src) {
      fileExt.value = getFileType(src);
      if (fileExt.value === 'mp4') {
        iframeVisible.value = true;
        fileSrc.value = src;
        fullscreen.value = false;
      } else {
        fullscreen.value = true;
        if (fileExt.value === 'pdf') {
          iframeVisible.value = true;
          fileSrc.value = src;
          iframeFrameborder.value = 0;
        } else if (['ppt', 'pptx', 'doc', 'docx', 'xls', 'xlsx'].includes(fileExt.value)) {
          // csv 文件看不了
          iframeVisible.value = true;
          fileSrc.value = `https://view.officeapps.live.com/op/view.aspx?src=${src}`;
          iframeFrameborder.value = 1;
        } else {
          Message.info('不支持查看');
          openWindow(src, {target: '_blank'});
        }
      }
    }
  };
  const download = (src: string) => {
    if (src) {
      downloadFile(src);
    }
  };

  // 暴露方法【给父级调用】
  defineExpose({
    viewFile,
    download,
  });
</script>

<style lang="less">

</style>
